<template>
  <div class="cascade">
    <transition-group class="c-select" name="list" tag="ul">
      <li class="c-select-item vux-1px-b" v-for="item in list" :key="item.code" @click="queryType(item.code)">{{item.name}}</li>
    </transition-group>
  </div>
</template>

<script>
  /**
   * 级联选择 地区学校
   */
  export default{
    data() {
      return {
        type: '',
        list: []
      }
    },
    created() {
      this.getProvince();
    },
    methods: {
      /**
       * 用户点选
       * @param {str} 省市区代码
       */
      queryType(code) {
        this.type == 'city' && this.getCity(code)
        this.type == 'area' && this.getArea(code)
      },
      /**
       * 省列表
       */
      getProvince() {
        this.$http.get('/province').then(res => {
          if (res.body.error.code !== 200) {
            alert(res.body.error.message)
            return
          }
          this.list = res.body.data.list
          this.type = 'city'
        })
      },
      /**
       * 市列表
       */
      getCity(code) {
        this.$http.get('/city?code=' + code).then(res => {
          if (res.body.error.code !== 200) {
            alert(res.body.error.message)
            return
          }
          this.list = res.body.data.list
          this.type = 'area'
        })
      },
      /**
       * 区列表
       */
      getArea(code) {
        this.$http.get('/area?code=' + code).then(res => {
          if (res.body.error.code !== 200) {
            alert(res.body.error.message)
            return
          }
          this.list = res.body.data.list
          this.type = 'school'
        })
      }
    }
  }
</script>

<style lang="less">
  .select-showbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    z-index: 100;
    &-inner {
      display: block;
      height: 50px;
      line-height: 50px;
    }
  }

  .list-enter-active, .list-leave-active {
    transition: all .2s;
  }
  .list-enter-active {
    transition-delay: 0.2s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>
